HTML5 eLearning Kit For Dummies by Boumphrey Frank

Author:Boumphrey, Frank
Language: eng
Format: epub
Publisher: John Wiley & Sons
Published: 2012-06-27T16:00:00+00:00

Figure 4-12

Sizing a background image

If you want to specify a size for your background image, you can do so with the background-size property. To set the values, you have the following options:

Use one or two length or percentage values. If you use one value, the second value is assumed to be the keyword value, auto. If you use two values, the first sets the width and the second sets the height.

The keyword auto can be used with a length or percentage value or on its own. auto sets the image size to its intrinsic value. So an image that’s sized to 300 pixels wide in a graphics program will appear 300 pixels wide in the browser.

Instead of a length or percentage, you can use the keywords cover or contain. The cover keyword sizes the image as small as possible while still completely covering the background area and maintaining the image’s aspect ratio. The contain keyword makes the image as large as possible within the background area while maintaining the image’s aspect ratio.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.